<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型演示</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7fa;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            margin-bottom: 10px;
        }
        
        .description {
            margin-bottom: 30px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .demo-container {
            flex: 1;
            min-width: 300px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .controls {
            flex: 1;
            min-width: 300px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .box-model-visualization {
            position: relative;
            margin: 40px auto;
            width: 300px;
            height: 200px;
        }
        
        .margin {
            background-color: rgba(255, 200, 200, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 1px dashed #ff6b6b;
            transition: all 0.3s ease;
        }
        
        .border {
            background-color: rgba(255, 225, 180, 0.5);
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
            border: 2px solid #ff9e43;
            transition: all 0.3s ease;
        }
        
        .padding {
            background-color: rgba(180, 220, 230, 0.5);
            position: absolute;
            top: 40px;
            left: 40px;
            right: 40px;
            bottom: 40px;
            border: 1px dashed #36b5f3;
            transition: all 0.3s ease;
        }
        
        .content {
            background-color: rgba(180, 230, 180, 0.5);
            position: absolute;
            top: 60px;
            left: 60px;
            right: 60px;
            bottom: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #4caf50;
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .label {
            position: absolute;
            font-size: 12px;
            color: #333;
            background: rgba(255, 255, 255, 0.8);
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        .label-margin {
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .label-border {
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .label-padding {
            top: 25px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .label-content {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .control-group {
            margin-bottom: 20px;
        }
        
        .control-group h3 {
            margin-bottom: 10px;
            color: #2c3e50;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .slider-container label {
            width: 80px;
            font-weight: 500;
        }
        
        .slider-container input[type="range"] {
            flex: 1;
            margin: 0 10px;
        }
        
        .slider-container span {
            width: 40px;
            text-align: right;
            font-family: monospace;
        }
        
        .code-container {
            background: #2d3a4b;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Fira Code', monospace;
            overflow-x: auto;
            margin-top: 20px;
        }
        
        .code-container pre {
            margin: 0;
        }
        
        .property {
            color: #7fdbca;
        }
        
        .value {
            color: #ffd700;
        }
        
        .selector {
            color: #ff7b72;
        }

        
        footer {
            text-align: center;
            padding: 20px;
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>CSS盒子模型演示</h1>
        <p>可视化理解CSS布局的基础概念</p>
    </header>
    
    <div class="description">
        <p>CSS盒子模型是网页布局的基础。每个HTML元素都被表示为一个矩形盒子，这个盒子由四个部分组成：</p>
        <ul>
            <li><strong>内容(Content)</strong> - 显示文本、图像或其他媒体的实际区域</li>
            <li><strong>内边距(Padding)</strong> - 内容周围的透明区域，在边框内部</li>
            <li><strong>边框(Border)</strong> - 围绕内容和内边距的边界</li>
            <li><strong>外边距(Margin)</strong> - 边框外的透明区域，用于分隔其他元素</li>
        </ul>
    </div>
    
    <div class="container">
        <div class="demo-container">
            <h2>可视化演示</h2>
            <div class="box-model-visualization">
                <div class="margin">
                    <div class="label label-margin">外边距: 20px</div>
                </div>
                <div class="border">
                    <div class="label label-border">边框: 2px</div>
                </div>
                <div class="padding">
                    <div class="label label-padding">内边距: 20px</div>
                </div>
                <div class="content">
                    <div class="label label-content">内容</div>
                </div>
            </div>
        </div>
        
        <div class="controls">
            <h2>交互控制</h2>
            
            <div class="control-group">
                <h3>外边距 (Margin)</h3>
                <div class="slider-container">
                    <label for="margin">大小:</label>
                    <input type="range" id="margin" min="0" max="50" value="20">
                    <span id="margin-value">20px</span>
                </div>
            </div>
            
            <div class="control-group">
                <h3>边框 (Border)</h3>
                <div class="slider-container">
                    <label for="border">宽度:</label>
                    <input type="range" id="border" min="0" max="20" value="2">
                    <span id="border-value">2px</span>
                </div>
            </div>
            
            <div class="control-group">
                <h3>内边距 (Padding)</h3>
                <div class="slider-container">
                    <label for="padding">大小:</label>
                    <input type="range" id="padding" min="0" max="50" value="20">
                    <span id="padding-value">20px</span>
                </div>
            </div>
            
            <div class="control-group">
                <h3>内容 (Content)</h3>
                <div class="slider-container">
                    <label for="width">宽度:</label>
                    <input type="range" id="width" min="100" max="400" value="180">
                    <span id="width-value">180px</span>
                </div>
                <div class="slider-container">
                    <label for="height">高度:</label>
                    <input type="range" id="height" min="50" max="300" value="80">
                    <span id="height-value">80px</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="code-container">
        <h2>生成的CSS代码</h2>
        <pre><code><span class="selector">.demo-element</span> {
    <span class="property">width</span>: <span class="value" id="code-width">180px</span>;
    <span class="property">height</span>: <span class="value" id="code-height">80px</span>;
    <span class="property">margin</span>: <span class="value" id="code-margin">20px</span>;
    <span class="property">border</span>: <span class="value" id="code-border">2px</span> solid #ff9e43;
    <span class="property">padding</span>: <span class="value" id="code-padding">20px</span>;
    <span class="property">box-sizing</span>: <span class="value">border-box</span>;
}</code></pre>
    </div>

    <footer>
        <p>[羽神同行]CSS陪跑训练营 &copy; EOVA.CN</p>
    </footer>

    <script>
        // 获取所有滑块元素
        const marginSlider = document.getElementById('margin');
        const borderSlider = document.getElementById('border');
        const paddingSlider = document.getElementById('padding');
        const widthSlider = document.getElementById('width');
        const heightSlider = document.getElementById('height');
        
        // 获取所有显示值的元素
        const marginValue = document.getElementById('margin-value');
        const borderValue = document.getElementById('border-value');
        const paddingValue = document.getElementById('padding-value');
        const widthValue = document.getElementById('width-value');
        const heightValue = document.getElementById('height-value');
        
        // 获取代码显示元素
        const codeMargin = document.getElementById('code-margin');
        const codeBorder = document.getElementById('code-border');
        const codePadding = document.getElementById('code-padding');
        const codeWidth = document.getElementById('code-width');
        const codeHeight = document.getElementById('code-height');
        
        // 获取可视化元素
        const marginElement = document.querySelector('.margin');
        const borderElement = document.querySelector('.border');
        const paddingElement = document.querySelector('.padding');
        const contentElement = document.querySelector('.content');
        
        // 获取标签元素
        const marginLabel = document.querySelector('.label-margin');
        const borderLabel = document.querySelector('.label-border');
        const paddingLabel = document.querySelector('.label-padding');
        
        // 更新可视化效果的函数
        function updateVisualization() {
            const margin = parseInt(marginSlider.value);
            const border = parseInt(borderSlider.value);
            const padding = parseInt(paddingSlider.value);
            const width = parseInt(widthSlider.value);
            const height = parseInt(heightSlider.value);
            
            // 更新外边距
            marginElement.style.borderWidth = `${margin}px`;
            marginLabel.textContent = `外边距: ${margin}px`;
            
            // 更新边框
            borderElement.style.borderWidth = `${border}px`;
            borderElement.style.top = `${margin}px`;
            borderElement.style.left = `${margin}px`;
            borderElement.style.right = `${margin}px`;
            borderElement.style.bottom = `${margin}px`;
            borderLabel.textContent = `边框: ${border}px`;
            
            // 更新内边距
            const paddingPos = margin + border;
            paddingElement.style.top = `${paddingPos}px`;
            paddingElement.style.left = `${paddingPos}px`;
            paddingElement.style.right = `${paddingPos}px`;
            paddingElement.style.bottom = `${paddingPos}px`;
            paddingElement.style.borderWidth = `${padding}px`;
            paddingLabel.textContent = `内边距: ${padding}px`;
            
            // 更新内容
            const contentPos = paddingPos + padding;
            contentElement.style.top = `${contentPos}px`;
            contentElement.style.left = `${contentPos}px`;
            contentElement.style.right = `${contentPos}px`;
            contentElement.style.bottom = `${contentPos}px`;
            contentElement.style.width = `${width}px`;
            contentElement.style.height = `${height}px`;
            
            // 更新显示的值
            marginValue.textContent = `${margin}px`;
            borderValue.textContent = `${border}px`;
            paddingValue.textContent = `${padding}px`;
            widthValue.textContent = `${width}px`;
            heightValue.textContent = `${height}px`;
            
            // 更新代码显示
            codeMargin.textContent = `${margin}px`;
            codeBorder.textContent = `${border}px`;
            codePadding.textContent = `${padding}px`;
            codeWidth.textContent = `${width}px`;
            codeHeight.textContent = `${height}px`;
        }
        
        // 添加事件监听器
        marginSlider.addEventListener('input', updateVisualization);
        borderSlider.addEventListener('input', updateVisualization);
        paddingSlider.addEventListener('input', updateVisualization);
        widthSlider.addEventListener('input', updateVisualization);
        heightSlider.addEventListener('input', updateVisualization);
        
        // 初始化
        updateVisualization();
    </script>
</body>
</html>